import React, {Component} from 'react';
import './index.css';

export default class Footer extends Component {
	// 点击单选框
	checkedAll = event => {
		const {checkedAll} = this.props;
		checkedAll(event.target.checked);
	};

	// 清除已完成任务
	deleteAllChecked = () => {
		const {deleteAllChecked} = this.props;
		deleteAllChecked();
	};

	render() {
		const {todoList} = this.props;
		// 获取已完成任务数
		const okSum = todoList.filter(item => {
			return item.done;
		});

		return (
			<div className="todo-footer">
				<label>
					<input
						type="checkbox"
						checked={okSum.length === todoList.length && todoList.length !== 0}
						onChange={this.checkedAll}
					/>
				</label>
				<span>
					<span>已完成{okSum.length}</span> / 全部{todoList.length}
				</span>
				<button className="btn btn-danger" onClick={this.deleteAllChecked}>
					清除已完成任务
				</button>
			</div>
		);
	}
}
